<template>
  <div class="smsManage" :style="[{'zoom': zoom}]">
    <div class="list-search" style="margin-left: 25px">
      <div class="singe-search">
        <el-input v-model="queryForm.name" placeholder="请输入模板名称" clearable></el-input>
      </div>
      <div class="singe-search">
        <el-button class="singe-search-btn2" icon="el-icon-search" type="primary"  @click="handleQuery">搜索</el-button>
      </div>
    </div>
    <div class="table-main">
      <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column type="index" label="序号" width="70" align="center">
        </el-table-column>
        <el-table-column prop="smsCode" label="模板编号" width="150">
        </el-table-column>
        <el-table-column prop="type" label="模板类型" min-width="120" :formatter="formatterType">
        </el-table-column>
        <el-table-column prop="name" label="模板名称" min-width="120">
        </el-table-column>
        <el-table-column prop="deptName" label="使用部门" min-width="120">
        </el-table-column>
        <el-table-column prop="content" label="模板内容" min-width="120">
        </el-table-column>
        <el-table-column  label="启用/停用" align="center" width="230">
          <template slot-scope="{row}">
            <el-switch
              @change="handleStatusChange(row)"
              v-model="row.status"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column  label="操作" min-width="120">
          <template slot-scope="{row}">
            <span style="margin-right: 30px"><el-button type="text" @click="handleDetail(row)">详情</el-button></span>
            <span><el-button class="btn-remove" type="text" @click="handleRemove(row)">删除</el-button></span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryForm.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryForm.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total">
      </el-pagination>
    </div>
    <el-dialog :title="'模板详情'" :visible.sync="infoDialogVisible" width="782px" class="form-dialog" append-to-body>
      <el-form :model="infoForm"  ref="form" label-width="100px" label-position="top" >
        <el-form-item :label="'模板编号'"  prop="deptName">
          <el-input props="smsCode" v-model="infoForm.smsCode" disabled></el-input>
        </el-form-item>
        <el-form-item :label="'模板名称'"  prop="name">
          <el-input props="name" v-model="infoForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item :label="'使用部门'"  prop="deptName">
          <el-input props="deptName" v-model="infoForm.deptName" disabled></el-input>
        </el-form-item>
        <el-form-item :label="'模板内容'"  prop="content">
          <el-input props="content" v-model="infoForm.content" disabled></el-input>
        </el-form-item>
        <el-form-item :label="'状态'"  prop="content">
          <el-switch
            disabled
            v-model="infoForm.enable"
            active-text="开启"
            inactive-text="停用">
          </el-switch>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

import {
  getSmsConfigDetail,
  updateSmsConfig
} from "@/api/sms/smsconfig";

import {
  getSmsConfigChangeLogPage,
} from "@/api/sms/smsconfigchangelog";


import {
  getSmsTemplatePage,
  getSmsTemplateDetail,
  removeSmsTemplate,
  updateSmsTemplate
} from "@/api/sms/smstemplate";

export default {
  name: 'smsManage',
  components: {},
  data() {
    return {
      width: 1848,
      zoom: 1,
      radio: 3,
      daterange: [],
      tableData: [],
      deptTree: [],
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id',
        checkStrictly: true
      },
      queryForm: {
        pageNo:1,
        pageSize:20,
        total:0,
        name:'',
      },

      infoDialogVisible:false,
      recordDialogVisible:false,
      recordTableData:[

      ],

      infoForm:{
        id:"",
        deptName:"",
        name:"",
        smsCode:"",
        content:"",
        status:"",
        enable:false,
      }

    }
  },
  computed: {
    tableHeight() {
      let h = document.body.clientHeight -25-240;
      console.log('h--------------------------',h)
      return h;
    },
  },
  created(){
    this.getList()
  },
  mounted() {
    let self = this;
    window.addEventListener('resize', () => {
      self.getZoom();
    });
    this.getZoom();
  },
  methods: {
    getZoom() {
      let self = this;
      let w = document.body.clientWidth;
      if (w < self.width) {
        self.zoom = (w / self.width) - 0.1;
      } else {
        self.zoom = 1;
      }
    },
    formatterType(row, column, cellValue, index) {
      if ('1' === cellValue) {
        return '警情';
      } else if ('2' === cellValue) {
        return '刑侦'
      }
    },
    handleDetail(row){
      this.infoDialogVisible=true
      this.infoForm=row
      this.infoForm.enable=this.infoForm.status=='1'
    },
    handleRemove(row){
      this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeSmsTemplate(row.id).then(res=>{
          if(res.data.code=='200'){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: '删除成功!'
            });
          }
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    resetForm() {
      this.queryForm = {
        pageNo:1,
        pageSize:20,
        total:0,
        deptId:'',
        senderName:'',
        daterange:'',
        status:'',
        startDate:'',
        endDate:'',
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.getList()
    },
    getList(){
      getSmsTemplatePage(this.queryForm.pageNo, this.queryForm.pageSize, this.queryForm).then(res=>{
        console.log('getSmsTemplatePage----------',res)
        let data=res.data.data
        this.tableData=data.records
        this.tableData=data.records
        this.queryForm.pageNo=data.current
        this.queryForm.pageSize=data.size
        this.queryForm.total=data.total
      })
    },

    /**
     * 查询
     */
    handleQuery(){
      this.getList()
    },
    /**
     * 查询
     */
    handleStatusChange(row){
      console.log('handleStatusChange------------',row)
      updateSmsTemplate(row).then(res=>{
        if(res.data.code==200){
          this.getList()
        }
      })
    },

  }
}
</script>

<style lang="scss" >
@import '../../styles/page/list';

.smsManage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .list-search{
    .singe-search{
      .singe-search-btn2{
        background-color: #FFFFFF;
        color: #2E488B;
        font-weight: 800;
        border-color: #FFFFFF;
        span {
          color: #2E488B;
          font-weight: 800;
        }
        .el-icon-search {
          color: #2E488B;
          font-weight: 800;
        }
      }
    }
  }
  .form-dialog {
    border-radius:10px;
    .Bag-ul {
      li {
        display: inline-block;
        list-style: none;
        font-size: 15px;
        width: 50%;
        height: 35px;
        line-height: 35px;
      }
    }
    .el-dialog .el-dialog__header {
      text-align: left;
    }
  }

  .table-main {
    margin-left: 25px;
  }
}
</style>
